<?php
/* @var $this DefaultController */
?>
<script type="text/javascript" src="/themes/admin/assets/plugins/highcharts/highcharts.js"></script>

<div class="row-fluid spacing-bottom 2col">	
	<div class="span3 ">	
		<div class="tiles blue added-margin">
			<div class="tiles-body">
				<div class="controller">								
					<a class="reload" href="javascript:;"></a>
					<a class="remove" href="javascript:;"></a>		
				</div>		
				<div class="tiles-title">
					Сервер работает уже:
				</div>	
				<br />
				<div class="heading">
					<span class="animate-number" id="time_d" data-value="<?php echo $status[ 'serverUpTime' ][ 'days' ]; ?>" data-animation-duration="1200">0</span> д.
					<span class="animate-number" id="time_h" data-value="<?php echo $status[ 'serverUpTime' ][ 'hours' ]; ?>" data-animation-duration="1200">0</span> ч.
					<span class="animate-number" id="time_m" data-value="<?php echo $status[ 'serverUpTime' ][ 'minutes' ]; ?>" data-animation-duration="1200">0</span> мин.
					<span class="animate-number" id="time_s" data-value="<?php echo $status[ 'serverUpTime' ][ 'second' ]; ?>" data-animation-duration="1200">0</span> сек.
				</div>
				<br />
			</div>	
		</div>
	</div>
	<div class="span3 ">
		<div class="tiles green added-margin">
			<div class="tiles-body">
				<div class="controller">								
					<a class="reload" href="javascript:;"></a>
					<a class="remove" href="javascript:;"></a>									
				</div>		
				<div class="tiles-title">
					Использование HDD [ <?php echo $status[ 'hdd' ][ 'name' ]; ?> ]
				</div>	
				<div class="heading">
					<span class="animate-number" id="hdd_usize" data-value="<?php echo $status[ 'hdd' ][ 'usedSize' ]; ?>" data-animation-duration="1200">0</span> Гб. из
					<span class="animate-number" id="hdd_tsize" data-value="<?php echo $status[ 'hdd' ][ 'totalSize' ]; ?>" data-animation-duration="1200">0</span> Гб.
				</div>
				<?php $hdd_percent = round( $status[ 'hdd' ][ 'usedSize' ] / $status[ 'hdd' ][ 'totalSize' ] * 100, 1 ); ?>
				<div class="progress transparent progress-white progress-small no-radius tip" data-original-title="Использование HDD:  <?php echo $hdd_percent; ?>%">
					<div id="hdd_percent" data-percentage="<?php echo $hdd_percent; ?>%" class="bar animate-progress-bar"></div>
				</div>				
				<div class="description"><i class="icon-hdd"></i><span class="text-white mini-description ">&nbsp; <span id="hdd_free"><?php echo $status[ 'hdd' ][ 'totalSize' ] - $status[ 'hdd' ][ 'usedSize' ]; ?></span> Гб. <span class="blend"> свободное место</span></span></div>	
			</div>
		</div>
	</div>
	<div class="span3 ">
		<div class="tiles red added-margin">
			<div class="tiles-body">
				<div class="controller">								
					<a class="reload" href="javascript:;"></a>
					<a class="remove" href="javascript:;"></a>									
				</div>		
				<div class="tiles-title">
					Использование памяти
				</div>	
				<div class="heading">
					<span id ="ddr_used" class="animate-number" data-value="<?php echo round( $status[ 'usedMemory' ], 3 ); ?>" data-animation-duration="1200">0</span> Гб. из
					<span id="ddr_total" class="animate-number" data-value="<?php echo round( $status[ 'totalMemory' ], 3 ); ?>" data-animation-duration="1200">0</span> Гб.
				</div>
				<?php $mem_percent = round( $status[ 'usedMemory' ] / $status[ 'totalMemory' ] * 100, 1 ); ?>
				<div class="progress transparent progress-white progress-small no-radius tip " data-original-title="Использование памяти: <?php echo $mem_percent; ?>%">
					<div id="ddr_percent" data-percentage="<?php echo $mem_percent; ?>%" class="bar animate-progress-bar"></div>
				</div>				
				<div class="description"><i class="icon-inbox"></i><span class="text-white mini-description ">&nbsp; <span id="ddr_free"><?php echo round( ( $status[ 'totalMemory' ] - $status[ 'usedMemory' ] ), 3 ); ?></span> Гб. <span class="blend"> свободной памяти</span></span></div>	
			</div>
		</div>
	</div>
	<div class="span3 ">
		<div class="tiles purple added-margin">
			<div class="tiles-body">
				<div class="controller">								
					<a class="reload" href="javascript:;"></a>
					<a class="remove" href="javascript:;"></a>									
				</div>		
				<div class="tiles-title">
					Состояние запущенных процессов
				</div>	
				<div class="heading">
					Проц. <span class="animate-number" id ="app_cpu_used" data-value="<?php echo $status[ 'total' ][ 'usedCPU' ]; ?>" data-animation-duration="1200">0</span>% , 
					ОЗУ <span class="animate-number" id ="app_ddr_used" data-value="<?php echo $status[ 'total' ][ 'usedMemory' ]; ?>" data-animation-duration="1200">0</span>%
				</div>
				<br />
				<div class="description"><i class="icon-dashboard"></i><span class="text-white mini-description ">&nbsp; <span id="app_count"><?php echo $status[ 'totalTasks' ]; ?></span> <span class="blend"> запущенных процессов</span></span></div>	
			</div>
		</div>
	</div>

</div>

<div class="row-fluid">
	<div class="span12">
		<div class="row-fluid spacing-bottom ">
			<div class="span12 tiles white">
				<div class="no-margin-grid">
					<div class="row-fluid">

						<div class="tile-more-content span4">
							<div class="tiles green">
								<div class="tiles-body">
									<div class="heading">
										Статистика уникальных посещений 
									</div>	
								</div>
								<div class="tile-footer">
									<div class="iconplaceholder"><i class="icon-map-marker"></i></div><strong><span id="ccount"><?php echo $status[ 'visitors' ][ 'ccount' ]; ?></span></strong> Стран, <strong><span id="rcount"><?php echo $status[ 'visitors' ][ 'rcount' ]; ?></span></strong> городов, <strong><span id="vcount"><?php echo $status[ 'visitors' ][ 'total' ]; ?></span></strong> уникальных посещений
								</div>
							</div>
							<div class="scroller" data-height="300px" data-alway-visible="1">
								<div class="tiles-body">
									<ul class="progress-list" id="visitors">
										<?php
										foreach( $status[ 'visitors' ][ 'list' ] as $visitor )
										{
											$vpercent = round( $visitor[ 'visitCount' ] / $status[ 'visitors' ][ 'total' ] * 100, 2 );
											$color = $vpercent > 66.7 ? "progress-success" : ($vpercent < 33.4 ? "progress-danger" : "progress-warning");
											echo '<li id="unique_visitor_' . $visitor[ 'visitorId' ] . '">
													<div class="details-wrapper">
														<div class="name">' . $visitor[ 'countryTitle' ] . '</div>
														<div class="description">' . $visitor[ 'regionTitle' ] . '</div>
													</div>
													<div class="details-status pull-right">
														<span data-animation-duration="800" data-value="' . $vpercent . '" class="animate-number percent-value">' . $vpercent . '</span>%
													</div> &nbsp;
													<div class="details-status pull-right">
														<span data-animation-duration="800" data-value="' . $visitor[ 'visitCount' ] . '" class="animate-number count-value">' . $visitor[ 'visitCount' ] . '</span>
													</div>
													<div class="clearfix"></div>
													<div class="progress progress-small no-radius ' . $color . '">
														<div data-percentage="' . $vpercent . '%" class="bar animate-progress-bar"></div>
													</div>
												</li>';
										}
										?>
									</ul>

								</div>
							</div>
						</div>
						<div class="span8">
							<div class="tiles white added-margin">
								<div class="tiles-body">
									<div class="tiles-title red">
										<h4>Состояние сервера</h4>
									</div>	
								</div>
							</div>
							<div class="tiles white added-margin">
								<div id="chart"></div>
							</div>
						</div>
					</div>
				</div>
			</div>	
		</div>
	</div>
</div>

<script type="text/javascript" >
	$(function() {
		$(document).ready(function() {
			Highcharts.setOptions({
				global: {
					useUTC: false
				}
			});

			chart;
			$('#chart').highcharts({
				chart: {
					type: 'spline',
					animation: false, // don't animate in old IE
					marginRight: 10,
					events: {
						load: function()
						{
							var series = this.series;
							setInterval(function()
							{
								$.ajax(
										{
											type: "POST",
											url: "/admin/main/server",
										})
										.done(function(data)
										{
											data = JSON.parse(data);

											$('#time_d').html(data.serverUpTime.days);
											$('#time_h').html(data.serverUpTime.hours);
											$('#time_m').html(data.serverUpTime.minutes);
											$('#time_s').html(data.serverUpTime.second);

											$('#hdd_usize').html((data.hdd.usedSize).toFixed(1));
											$('#hdd_tsize').html((data.hdd.totalSize).toFixed(1));
											var hdd_percent = ((data.hdd.usedSize / data.hdd.totalSize) * 100).toString() + "%";
											$('#hdd_percent').css("width", hdd_percent)
											$('#hdd_percent').parent().data("original-title", "Использование HDD: " + hdd_percent);
											$('#hdd_free').html((data.hdd.totalSize - data.hdd.usedSize).toFixed(1));

											$('#ddr_used').html(data.usedMemory.toFixed(2));
											$('#ddr_total').html(data.totalMemory.toFixed(2));
											var ddr_percent = ((data.usedMemory / data.totalMemory) * 100).toString() + "%";
											$('#ddr_percent').css("width", ddr_percent)
											$('#ddr_percent').parent().data("original-title", "Использование памяти: " + ddr_percent);
											$('#ddr_free').html((data.totalMemory - data.usedMemory).toFixed(2));

											$('#app_cpu_used').html(data.total.usedCPU.toFixed(1));
											$('#app_ddr_used').html(data.total.usedMemory.toFixed(1));
											$('#app_count').html(data.totalTasks);

											series[0].addPoint([(new Date()).getTime(), data.mysql.usedMemory], true, true);
											series[1].addPoint([(new Date()).getTime(), data.mysql.usedCPU], true, true);
											series[2].addPoint([(new Date()).getTime(), data.server.usedMemory], true, true);
											series[3].addPoint([(new Date()).getTime(), data.server.usedCPU], true, true);
											if (data.visitors)
											{
												$('#ccount').html(data.visitors.ccount);
												$('#rcount').html(data.visitors.rcount);
												$('#vcount').html(data.visitors.total);

												var visitor, vis_block, vpercent, vcolor, prbar;
												for (var ind in data.visitors.list)
												{
													visitor = data.visitors.list[ind];
													vis_block = $('#unique_visitor_' + visitor.visitorId);

													vpercent = (visitor.visitCount / data.visitors.total * 100).toFixed(2);
													vcolor = vpercent > 66.7 ? "progress-success" : (vpercent < 33.4 ? "progress-danger" : "progress-warning");

													if (vis_block.length)
													{
														vis_block.find('span.count-value').html(visitor.visitCount);
														vis_block.find('span.percent-value').html(vpercent);
														prbar = vis_block.find('span.animate-progress-bar');
														prbar.css("width", vpercent + "%");
														if (prbar.hasClass(vcolor))
														{

														}
														else if (prbar.hasClass('progress-warning'))
														{
															prbar.removeClass('progress-warning').addClass(vcolor);
														}
														else if (prbar.hasClass('progress-danger'))
														{
															prbar.removeClass('progress-danger').addClass(vcolor);
														}
														else if (prbar.hasClass('progress-success'))
														{
															prbar.removeClass('progress-success').addClass(vcolor);
														}
													} else
													{
														vis_block = $('ul#visitors>li:first').clone();
														vis_block.attr("id","unique_visitor_"+visitor.visitorId);
														vis_block.find('div.details-wrapper>div.name').html(visitor.countryTitle);
														vis_block.find('div.details-wrapper>div.description').html(visitor.regionTitle);
														vis_block.find('span.count-value').html(visitor.visitCount);
														vis_block.find('span.percent-value').html(vpercent);
														prbar = vis_block.find('span.animate-progress-bar');
														prbar.css("width", vpercent + "%");
														if (prbar.hasClass(vcolor))
														{

														}
														else if (prbar.hasClass('progress-warning'))
														{
															prbar.removeClass('progress-warning').addClass(vcolor);
														}
														else if (prbar.hasClass('progress-danger'))
														{
															prbar.removeClass('progress-danger').addClass(vcolor);
														}
														else if (prbar.hasClass('progress-success'))
														{
															prbar.removeClass('progress-success').addClass(vcolor);
														}
														$(document).find('ul#visitors').append(vis_block);
													}

												}
											}
										})
										.fail(function(data) {
											if (data.status == 403)
											{
												window.location.reload();
											}
										});
							}, 3000);
						}
					}
				},
				title: {
					text: ''
				},
				xAxis: {
					type: 'datetime',
					tickPixelInterval: 150
				},
				yAxis: {
					title: {
						text: 'Значения'
					},
					plotLines: [
						{
							value: 0,
							width: 1,
							color: '#808080'
						}
					]
				},
				tooltip: {
					formatter: function() {
						return '<b>' + this.series.name + '</b><br/>' +
								Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
								Highcharts.numberFormat(this.y, 2);
					}
				},
				legend: {
					enabled: true
				},
				exporting: {
					enabled: true
				},
				series: [{
						name: 'MYSQL Память',
						color: '#0090D9',
						data: (function() {
							// generate an array of random data
							var data = [],
									time = (new Date()).getTime(),
									i;

							for (i = -10; i <= 0; i++) {
								data.push({
									x: (new Date()).getTime(),
									y: <?php echo $status[ 'mysql' ][ 'usedMemory' ]; ?>
								});
							}
							return data;
						})()
					},
					{
						name: 'MYSQL Процессор',
						color: '#0AA699',
						data: (function() {
							// generate an array of random data
							var data1 = [],
									time = (new Date()).getTime(),
									i;

							for (i = -10; i <= 0; i++) {
								data1.push({
									x: (new Date()).getTime(),
									y: <?php echo $status[ 'mysql' ][ 'usedCPU' ]; ?>
								});
							}
							return data1;
						})()
					},
					{
						name: 'Apache Память',
						color: '#F35958',
						data: (function() {
							// generate an array of random data
							var data2 = [],
									time = (new Date()).getTime(),
									i;

							for (i = -10; i <= 0; i++) {
								data2.push({
									x: (new Date()).getTime(),
									y: <?php echo $status[ 'server' ][ 'usedMemory' ]; ?>
								});
							}
							return data2;
						})()
					},
					{
						name: 'Apache процессор',
						color: '#736086',
						data: (function() {
							// generate an array of random data
							var data3 = [],
									time = (new Date()).getTime(),
									i;

							for (i = -10; i <= 0; i++) {
								data3.push({
									x: (new Date()).getTime(),
									y: <?php echo $status[ 'server' ][ 'usedCPU' ]; ?>
								});
							}
							return data3;
						})()
					}
				]
			});
		});

	});
</script>
